﻿@model IEnumerable<Developer.Entity.CycleBrand>

@{
    Layout = "~/Views/Shared/_Layout.cshtml";
}

<style>
    .mui-row.mui-fullscreen > [class*="mui-col-"] {
        height: 100%;
    }

    .mui-col-xs-3,
    .mui-control-content {
        overflow-y: auto;
        height: 100%;
    }

    .mui-segmented-control .mui-control-item {
        line-height: 50px;
        width: 100%;
    }

    .mui-segmented-control.mui-segmented-control-inverted .mui-control-item.mui-active {
        background-color: #fff;
    }
</style>

<div class="mui-content mui-row mui-fullscreen">
    <div class="mui-col-xs-3">
        <div id="segmentedControls" class="mui-segmented-control mui-segmented-control-inverted mui-segmented-control-vertical">
            @{
                    var j = 1;
                    foreach (var model in Model.OrderBy(a=>a.Sequence))
                    {
                    <a class="mui-control-item @(j==1?"mui-active":"")" href="#item@(j++)">@(model.Name)</a>
            }
            }
        </div>
    </div>
    <div id="segmentedControlContents" class="mui-col-xs-9" style="border-left: 1px solid #c8c7cc;">
        @{ 
             var i = 1;
             foreach(var item in Model.OrderBy(a=>a.Sequence))
             {
            <div id="item@(i)" class="mui-control-content @(i++ == 1?"mui-active":"")">
                @foreach(var model in item.CycleModel.OrderBy(a=>a.Sequence))
                {
                    <a href="/Recycle/SelectProblem?mid=@(model.Id)">
                        <ul class="mui-table-view">
                            <li class="mui-table-view-cell">@(model.Name)</li>
                        </ul>
                    </a>

                }
            </div>

            }
        }
        
    </div>
</div>


<script>

        mui.init({
            swipeBack: true //启用右滑关闭功能
			});
			var controls = document.getElementById("segmentedControls");
			var contents = document.getElementById("segmentedControlContents");
			
    contents.innerHTML = html.join('');
    //默认选中第一个
    controls.querySelector('.mui-control-item').classList.add('mui-active');
    contents.querySelector('.mui-control-content').classList.add('mui-active');
</script>
